<template>
  <div>
    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[8]"/>
      </div>
      <!--  8#-->
      <div
          style=" position: absolute; top:180px; left: 180px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[100]"/>
      </div>
      <!--  18# 100 办公楼-->
      <div
          style=" position: absolute; top:450px; left: 510px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[9]"/>
      </div>
      <!--  9#-->
      <div
          style=" position: absolute; top:340px; left: 520px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[7]"/>
      </div>
      <!--7#-->
      <div
          style=" position: absolute; top:320px; left: 820px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[16]"/>
      </div>
      <!--  16#-->
      <div
          style=" position: absolute; top:150px; left: 840px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[12]"/>
      </div>
      <!--12#-->
      <div
          style=" position: absolute; top:110px; left: 430px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[11]"/>
      </div>
      <!--11#-->
      <div
          style=" position: absolute; top:80px; left: 270px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[15]"/>
      </div>
      <!--15#-->
      <div
          style=" position: absolute; top:80px; left: 680px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>
    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[14]"/>
      </div>
      <!--14#-->
      <div
          style=" position: absolute; top:250px; left: 680px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[13]"/>
      </div>
      <!--13#-->
      <div
          style=" position: absolute; top:180px; left: 550px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[6]"/>
      </div>
      <!--6#-->
      <div
          style=" position: absolute; top:250px; left: 1090px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[5]"/>
      </div>
      <!--  5#-->
      <div
          style=" position: absolute; top:220px; left: 1290px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[4]"/>
      </div>
      <!--  4#-->
      <div
          style=" position: absolute; top:330px; left: 1600px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[1]"/>
      </div>
      <!--1#-->
      <div
          style=" position: absolute; top:250px; left: 1720px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[2]"/>
      </div>
      <!--  2#-->
      <div
          style=" position: absolute; top:200px; left: 1610px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[3]"/>
      </div>
      <!--3#-->
      <div
          style=" position: absolute; top:150px; left: 1510px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[101]"/>
      </div>
      <!--3#a  101-->
      <div
          style=" position: absolute; top:120px; left: 1400px; opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>
    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <card :number="companyList[10]"/>
      </div>
      <!--  10#-->
      <div
          style=" position: absolute; top:305px; left: 360px;  opacity: 0; height: 60px; width: 60px; background: #FFFFFF; "/>
    </el-tooltip>

<!--    //摄像头-->
    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[8]"/>
      </div>
      <!--  8#-->
      <svg-camera style=" position: absolute; top:280px; left: 240px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[20]"/>
      </div>
      <!--  18# 100 办公楼-->
      <svg-camera style="position: absolute; top:450px; left: 600px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[9]"/>
      </div>
      <!--  9#-->
      <svg-camera style="position: absolute; top:400px; left: 520px;"/>

    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[7]"/>
      </div>
      <!--7#-->
      <svg-camera style="position: absolute; top:390px; left: 770px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[16]"/>
      </div>
      <!--  16#-->
      <svg-camera style="position: absolute; top:250px; left: 890px;"/>

    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[12]"/>
      </div>
      <!--12#-->
      <svg-camera style=" position: absolute; top:180px; left: 430px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[11]"/>
      </div>
      <!--11#-->
      <svg-camera style=" position: absolute; top:120px; left: 300px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[15]"/>

      </div>
      <!--15#-->
      <svg-camera style="position: absolute; top:140px; left: 690px;"/>
    </el-tooltip>
    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[14]"/>

      </div>
      <!--14#-->
      <svg-camera style="position: absolute; top:320px; left: 680px"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[13]"/>
      </div>
      <!--13#-->
      <svg-camera style="position: absolute; top:250px; left: 550px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[6]"/>
      </div>
      <!--6#-->
      <svg-camera style="position: absolute; top:310px; left: 1020px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[5]"/>
      </div>
      <!--  5#-->
      <svg-camera style=" position: absolute; top:190px; left: 1200px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[4]"/>
      </div>
      <!--  4#-->
      <svg-camera style="position: absolute; top:300px; left: 1510px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[0]"/>
      </div>
      <!--1#-->
      <svg-camera style="position: absolute; top:300px; left: 1725px;"/>

    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[1]"/>
      </div>
      <!--  2#-->
      <svg-camera style="position: absolute; top:255px; left: 1610px;"/>

    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[2]"/>
      </div>
      <!--3#-->
      <svg-camera style="position: absolute; top:210px; left: 1490px; "/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[3]"/>
      </div>
      <!--3#a  101-->
      <svg-camera style="position: absolute; top:170px; left: 1380px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[10]"/>
      </div>
      <!--  10#-->
      <svg-camera style=" position: absolute; top:420px; left: 360px;"/>
    </el-tooltip>


    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[17]"/>
      </div>
      <!--  1号岗#-->
      <svg-camera style=" position: absolute; top:500px; left: 380px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[18]"/>
      </div>
      <!--  2号岗#-->
      <svg-camera style=" position: absolute; top:460px; left: 1840px;"/>
    </el-tooltip>

    <el-tooltip effect="light" placement="right">
      <div slot="content">
        <BuildingCameraIndex :buildingIndex="buildingIndex[19]"/>
      </div>
      <!--  3号岗#-->
      <svg-camera style=" position: absolute; top:440px; left: 1000px;"/>
    </el-tooltip>

    <img class="image" height="616" src="../../../assets/img/screen.jpg" width="1891.66"/>
  </div>
</template>

<script>
import Card from "../../../components/companyInBuilding";
import SvgCamera from "../../../components/svgCamera";
import BuildingCameraIndex from "../../../components/BuildingCameraIndex";
import {groupByRegionName} from "../../../common/cameraUtils";
import {listGroupByBuildingIndex} from "../../../network/companyApi";
import {queryArtemisCamera} from "../../../network/cameraVideoApi";

export default {
  name: "screenImg",
  components: {BuildingCameraIndex, SvgCamera, Card},
  data() {
    return {
      companyList: [],
      buildingIndex: []
    }
  },
  methods: {
    companyIndex() {
      listGroupByBuildingIndex({showMessage: 1}).then(res => {
        this.companyList = res.data
        console.log(this.companyList)
      }).catch(() => {
        // this.companyIndex()
      })
    },

    cameraBuildingIndex() {
      queryArtemisCamera({showMessage: 1}).then(res => {
        this.buildingIndex = this.groupByRegionName(res.data)

      })
    },
    //摄像头楼栋分组
    groupByRegionName
  },
  mounted() {
    this.cameraBuildingIndex()
    this.companyIndex()
  },

}
</script>

<style scoped>
</style>
